<template>
	<view class="news">
		<view class="news-container">
			<image :src="list.imgUrl.url"></image>
			<swiper
			  class="swiper"
			  :indicator-dots="indicatorDots"
			  :autoplay="autoplay"
			  :interval="interval"
			  :duration="duration"
			  indicator-active-color="#ffffff"
			  :vertical="vertical"
			  :circular="circular">
				<swiper-item
					v-for="(news, idx) in list.newList.list"
					:key="idx">
					<text>{{ news.chiild[0].val }}</text>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default: () => {}
			}
		},
		data () {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				vertical: true,
				circular: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news {
		margin-top: 30rpx;
		&-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 76rpx;
			border-top: 1rpx solid #f4f4f4;
			padding: 0 30rpx;
			box-shadow: 0 10rpx 30rpx #f5f5f5;
			
			image {
				width: 124rpx;
				height: 28rpx;
				border-right: 1rpx solid #ddd;
				padding-right: 22rpx;
			}
			
			.swiper {
				width: 522rpx;
				height: 100%;
				swiper-item {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>
